<template>
  <a-form-model
    class="detailPaddingPage"
    style="display: flex; flex-direction: column"
    :layout="formLayout"
    :colon="false">
    <!-- 审核流程 -->
    <a-form-model-item :label="$t('auditProcess')" class="customFormModelItem2" v-if="showProcessViewer"> </a-form-model-item>
    <a-form-model-item>
      <a-row >
        <!-- 流程名称 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('flowName') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                {{ definitionName }}
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 撤回类型 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('withdrawType') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                {{ cancelType }}
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <div style="height:360px;margin-bottom: 16px;" v-if="showProcessViewer">
        <process-viewer
          v-if="processView.index"
          :key="`designer-${processView.index}`"
          :finishedInfo="finishedInfo"
          :xml="processView.xmlData"
          style="height:100%" />
      </div>
      <!-- 审核节点列表 -->
      <display-tb-list :lists="processList"></display-tb-list>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import DisplayTbList from '@/views/components/AuditFlowProcess/displayTbList.vue'
import ProcessViewer from '@/components/ProcessViewer'
import { reviewProcessColumns } from '../config/list'
import {OTAEngineer,qualityEngineer,testEngineer} from "@/views/todo/myReview/config/nodeNameList.js"
const initProcessView = {
  index: '',
  xmlData: ''
}
export default {
  components: { TableEllipsis, QuestionMarkTip, ProcessViewer, DisplayTbList },
  props: {
    isPendingReview: {
      type: String,
      default: ''
    } ,
    showProcessViewer: {
      type: Boolean,
      default: true
    },
    createTime: {
      type: Number,
      default: 0
    },
    applyUserName:{
      type: String,
      default: ''
    }
  },
  data () {
    return {
      formLayout: 'horizontal',
      showEdit: false,
      columns: reviewProcessColumns,
      cancelType: '',
      definitionName: '',
      processXml: '',
      processList: [],
      processView: {
        ...initProcessView
      },
      finishedInfo: {
        finishedSequenceFlowSet: [],
        finishedTaskSet: [],
        unfinishedTaskSet: [],
        rejectedTaskSet: []
      }
    }
  },
  computed: {
    // 因为操作后需要关闭标签，所以引入该状态
    visitedViews () {
      return this.$store.state.tagsView.visitedViews
    }
  },
  watch:{
    applyUserName:{
      handler(val){
        if(val){
          this.processList.unshift({
            taskName:'申请人',
            processModeDesc:'-',
            candidatesName:'-',
            assignee:'-',
            actualAssignee:val,
            urgeTimes:'-',
            taskStatusName:'发起表单申请',
            auditTime:this.createTime
          })
        }
      }
    }
  },
  mounted () {
    const vm = this
    const queryObj = {
      businessCode: this.$route.query.swcode,
      businessKey: this.$route.query.key,
      instanceId: this.$route.query.id
    }
    if (this.$route.query.p) {
      queryObj.taskId = this.$route.query.p
    }
    this.$api.getReviewFlowDetail(queryObj).then(res => {
      const { data } = res
      if (!data) {
        return
      }
      if ((!data.viewFlag) && (this.isPendingReview === 'pendingReview')) {
        vm.$store.dispatch('tagsView/delView', vm.visitedViews.at(-1))
          .then(() => {
            vm.$message.warning(vm.$t('dqyhmyshqx'))
            vm.$router.replace({ path: this.$store.state.user.firstPath }).catch(err => { console.log(err) })
          }
          )
        return
      }
      if (data.hiddenCancel == 1) {
        this.$emit('hideWithdrawBtn', true)
      }
      if (data.businessCode=="task_audit"&&(data.tasks[data.tasks.length-1].taskName.includes(qualityEngineer)
          ||
          data.tasks[data.tasks.length-1].taskName.includes(OTAEngineer)
          ||
          data.tasks[data.tasks.length-1].taskName.includes(testEngineer))
      ) {
        this.$emit('showInfo', true)
      }
      if (data.businessCode=="sw_repo_audit"&&data.tasks[data.tasks.length-1].taskName =='系统开发主责人'&&data.tasks[data.tasks.length-1].taskStatusName=="审核中") {
        this.$emit('hideAddInfoBtn', true)
      }
      if ((data.businessCode=="sw_repo_audit" || data.businessCode=="user_register")&&data.tasks[data.tasks.length-1].canTransfer) {
        this.$emit('hideWithTransforBtn', true)
      }
      if (data.businessCode=="sw_repo_audit"&&data.tasks[data.tasks.length-1].taskName =='系统开发主责人'&&data.tasks[data.tasks.length-1].taskStatusName=="审核中") {
        this.$emit('addInfoBtn', true)
      }
      if (data.instanceStatus) {
        this.$emit('checkStatus', data.instanceStatus)
      }
      if (data.bpmnXml) {
        this.processView.index = 'process' + Math.random
        this.processView.xmlData = data.bpmnXml
      }
      if (data.viewer) {
        this.finishedInfo.finishedTaskSet = data.viewer.finishedTaskSet
        this.finishedInfo.unfinishedTaskSet = data.viewer.unfinishedTaskSet
        this.finishedInfo.rejectedTaskSet = data.viewer.rejectedTaskSet
        this.finishedInfo.finishedSequenceFlowSet = data.viewer.finishedSequenceFlowSet
      }
      this.definitionName = data.definitionName
      this.cancelType = data.cancelType
      if(!this.showProcessViewer){
        this.processList = [...this.processList,...data.tasks]
      }else{
        this.processList = data.tasks
      }
      if (data.endTime) {
        this.$emit('transTime', data.endTime)
      }
      if (data.fileSize) {
        this.$emit('transFileLimit', { fileSize: data.fileSize, fileCount: data.fileCount })
      }
    })
  },
  methods: {}
}
</script>
<style lang="less" scoped>
::v-deep .ant-form-item{
margin-bottom: 8px ;
}
::v-deep .deepClass{
    font-weight: 600;
    margin-right: 38px;
    text-align: right;

}
::v-deep .ant-form-item-label {
    font-weight: 600;
    margin-right: 12px;
}
  .customFormModelItem2 {
      ::v-deep .ant-form-item-label {
        &::before {
          display: inline-block;
          content: '';
          width: 6px;
          background-color: rgba(67, 136, 166, 1);
          height: 14px;
          vertical-align: middle;
          margin-right: 3px;
        }
      }
    }
</style>
